<template>
  <van-swipe :autoplay="5000" lazy-render>
    <van-swipe-item v-for="image in state.images" :key="image">
      <img :src="image.pic" />
    </van-swipe-item>
  </van-swipe>
</template>
<script>
import { getBanner } from "@/request/api/home";
import { onMounted, reactive } from "vue";
// reactive 响应式对象
export default {
  setup() {
    const state = reactive({
      images: [],
    });
    onMounted(async () => {
      //封装
      let res = await getBanner();
      // console.log(res);
      state.images = res.data.banners;
    });
    return { state };
  },
};
</script>
<style lang="less">
.van-swipe {
  width: 100%;
  height: 3rem;
  .van-swipe-item {
    padding: 0.2rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0.4rem;
    }
    .van-swipe__indicator--active {
      background-color: rgb(219, 130, 130);
    }
  }
}
</style>
